<template>
	<view class="container">
		<view class="banner">
			<u-swiper height="520rpx" :list="list" indicator indicatorMode="line" circular></u-swiper>
		</view>
		<view class="p-t u-flex u-col-center u-row-between">
			<view class="price" >
				￥<text>{{price}}</text>
			</view>
			<view class="total">
				库存:<text>{{number}}</text> 份
			</view>
		</view>
		<view class="f-title">
			{{data.name}}
		</view>
		<view class="f-info" v-if="data.content">
			<u-parse :content="data.content"></u-parse>
		</view>
		<view class="list" v-if="data.spec == 1">
			<view class="item" v-for="(item,index) in spec_list" :key="index">
				<view class="title">
					{{item.label}}
				</view>
				<view class="type-list">
					<view class="i u-flex u-col-center u-row-between" :class="{on:spec_user[index]==item2}"
						@click="changeSpec(index,item2)" v-for="(item2,index2) in item.value">
						<view class="l">
							{{item2}}
						</view>
						<view class="r">
							<image src="/static/image/c2.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="f-con">
			<u-parse :content="content"></u-parse>
		</view>
		<view class="f-btn" @click="addCart" v-if="data&&data.id&&number>0">
			<view class="btn">确认</view>
		</view>
		<view class="f-btn" v-else>
			<view class="btn2">库存不足</view>
		</view>

		<!-- <view class="f-footer u-flex u-col-center u-row-between">
			<view class="l">
				重置
			</view>
			<view class="r u-flex u-col-center u-row-between">
				<view class="rl" @click="cartShow = !cartShow">
					￥<text>15.9</text>
				</view>
				<view class="rr">
					<view class="t">
						加入购物车
					</view>
					<view class="p">
						Add to Cart
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="footer-cart" v-if="cartShow">
			<view class="list u-flex u-col-center">
				<view class="item" v-for="(item,index) in 8" :key="index">
					<view class="img">
						<image src="/static/image/1.jpg" mode="aspectFill"></image>
						<text>×5</text>
					</view>
					<view class="del">
						<image src="/static/image/del2.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				cartShow: false,
				content: "说明：<br> 产品及包装以实物为准产品及包装以实物为准，产品及包装以实物为准产品及包装以实物为准，产品及包装以实物为准产品及包装以实物为准产品及包装以实物为准产品及包装以实物为准，产品及包装以实物为准。",
				ice: 1,
				sweet: 1,
				id: "",
				number: 0,
				http: this.$imgUrl,
				goodsData: {},
				list: [],
				data: {
					name: ""
				},
				match_dish: [],
				spec_list: [],
				spec_price: [],
				spec_user: [],
				price: "",
				type: "",
				spec_name: "",
				uuid: ""
			}
		},
		onLoad(o) {
			if (o.type && o.type == 'edit') {
				this.type = o.type
				this.spec_name = o.spec_name
				this.uuid = o.uuid
			}
			this.id = o.id
			this.shopData = JSON.parse(uni.getStorageSync('shopData'))
			this.getData()
		},
		methods: {
			addCart() {
				function generateRandomString(length) {
					const chars = '0123456789abcdefghijklmnopqrstuvwxyz'; // 可选字符集
					let result = '';

					for (let i = 0; i < length; i++) {
						const randomIndex = Math.floor(Math.random() * chars.length);
						result += chars[randomIndex];
					}
					return result;
				}
				if (this.type == 'edit') {
					let lista = uni.getStorageSync('cartData') ? JSON.parse(JSON.stringify(uni.getStorageSync(
						'cartData'))) : []
					let index = lista.findIndex(item => item.uuid == this.uuid)
					if (index > -1) {
						this.$set(lista[index], 'spec_name', this.spec_user.join('|'))
						uni.setStorageSync('cartData', JSON.parse(JSON.stringify(lista)))
						uni.showToast({
							title: '更改成功',
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}

				} else {
					let data = {
						uuid: generateRandomString(10),
						id: this.id,
						shop_id: this.goodsData.shop_id,
						upday: this.goodsData.upday,
						uptime: this.goodsData.uptime,
						dish_data_id: this.goodsData.dish_id,
						spec_name: this.spec_user.join('|'),
						number: 1,
						oneprice: this.price,
						price: this.price,
						match_dish: [],
						goods_data: this.goodsData
					}
					let list = uni.getStorageSync('cartData') ? JSON.parse(JSON.stringify(uni.getStorageSync(
						'cartData'))) : []
					if (list.length == 0) {
						uni.setStorageSync('cartData', [data])
						uni.showToast({
							title: '添加成功',
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						function arraysEqual(a, b) {
							return JSON.stringify(a) === JSON.stringify(b);
						}
						// 同店铺 同日 同餐  同商品 同规格 同套餐
						let findIndex = list.findIndex(item => item.shop_id == data.shop_id && item.upday == data.upday &&
							item
							.uptime == data.uptime && item.dish_data_id == data.dish_data_id && item.spec_name == data
							.spec_name && arraysEqual(item.match_dish, data.match_dish))
						let nums = list.filter(item => item.id == data.id).reduce((acc,
							cur) => acc + parseInt(cur.number), 0)
						console.log(nums, 'nums')
						if (nums >= this.goodsData.number) {
							uni.showToast({
								title: '库存不足',
								icon: "none"
							});
							return
						}
						if (findIndex > -1) {
							list[findIndex].number += 1
						} else {
							list.push(data)
						}
						console.log(findIndex, list, data)
						uni.setStorageSync('cartData', JSON.parse(JSON.stringify(list)))
						uni.showToast({
							title: '添加成功',
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)

					}
				}
			},


			getData() {
				this.$http.post('/app/dishs/dishDetail', {
					shop_id: this.shopData.id,
					dish_data_id: this.id
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.number = res.data.number
						this.goodsData = res.data
						this.list = res.data.dish.imageList.map(item => this.$imgUrl + item)
						this.data = res.data.dish
						this.match_dish = res.data.dish.match_dish

						if (res.data.dish.spec == 1) {
							this.spec_list = res.data.dish.spec_list
							this.spec_price = res.data.dish.spec_price
							let index = -1
							if (this.type == 'edit') {
								this.spec_user = this.spec_name.split('|')
								index = this.spec_price.findIndex(item => item.label == this.spec_name)
								this.price = index > -1 ? this.spec_price[index].price : 0
							} else {
								this.spec_user = this.spec_list.map(item => item.value[0])
								let spec_text = this.spec_user.join('|')
								index = this.spec_price.findIndex(item => item.label == spec_text)
								this.price = index > -1 ? this.spec_price[index].price : 0
							}
						} else {
							this.price = res.data.dish.price
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			changeSpec(i, t) {
				this.spec_user[i] = t
				let spec_text = this.spec_user.join('|')
				let index = this.spec_price.findIndex(item => item.label == spec_text)
				this.price = index > -1 ? this.spec_price[index].price : 0
				this.$forceUpdate()
			},

		}
	}
</script>

<style lang="less" scoped>
	@color: #E51B00;

	.container {
		.f-con {
			color: #B5B5BB;
			font-size: 26rpx;
			line-height: 40rpx;
			padding: 20rpx 20rpx 160rpx;
		}

		.f-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx;
			background-color: #fff;
			z-index: 999;

			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background: @color;
				border-radius: 40rpx;
			}

			.btn2 {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background: #D1D1D6;
				border-radius: 40rpx;
			}
		}

		.list {
			padding: 20rpx;


			.item {

				.type-list {
					margin-bottom: 40rpx;

					.i {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20rpx;
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 12rpx;
						border: 2rpx solid #D1D1D6;

						.l {
							font-size: 26rpx;
							color: #000;
						}

						.r {
							display: none;
							width: 40rpx;
							height: 40rpx;

							image {
								width: 100%;
								height: 100%;
								display: block;
							}
						}
					}

					.on {
						border: 2rpx solid @color;

						.r {
							display: block;
						}
					}

				}

				.title {
					height: 40rpx;
					line-height: 40rpx;

					font-size: 28rpx;
					color: #000000;
					text-align: left;
					position: relative;
					text-indent: 20rpx;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 4rpx;
						width: 6rpx;
						height: 32rpx;
						border-radius: 3rpx;
						background-color: @color ;
					}
				}

				.imgs {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;

					.i {
						width: 224rpx;
						min-height: 320rpx;
						border-radius: 12rpx;
						overflow: hidden;
						border: 2rpx solid #E51B00;
						margin-right: 20rpx;

						image {
							width: 224rpx;
							height: 200rpx;
						}

						.btn {
							width: 88rpx;
							height: 44rpx;
							line-height: 44rpx;
							background: #000000;
							border-radius: 22rpx;
							text-align: center;
							font-size: 22rpx;
							color: #fff;
							margin: 20rpx auto;
						}

						.c {
							padding: 0 40rpx 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text-align: center;

							image {
								width: 40rpx;
								height: 40rpx;
							}

							.cc {
								flex: 1;
								padding: 0 20rpx;
								height: 40rpx;
								line-height: 40rpx;
								font-weight: bold;
								font-size: 30rpx;
								color: #E51B00;
								text-align: center;

							}
						}

						.t {
							padding: 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							color: #000000;
							text-align: left;

						}

						.p {
							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color: @color;
							text-align: center;
						}
					}
				}
			}
		}

		.f-info {
			margin-top: 15rpx;
			line-height: 30rpx;

			color: #B5B5BB;
			text-align: left;
			padding: 0 20rpx;
			font-size: 26rpx;
		}

		.f-title {
			margin-top: 20rpx;
			line-height: 60rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			padding: 0 20rpx;
		}

		.p-t {
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 25rpx;

			.price {


				font-size: 30rpx;
				color: @color;

				text {
					font-size: 48rpx;
					font-weight: 600;
					margin-left: 5rpx;
				}
			}

			.total {
				font-size: 28rpx;
				color: #B5B5BB;

				text {
					padding: 5rpx;
					color: #000;
				}
			}
		}

		.banner {
			width: 100%;
			height: 520rpx;

		}

		.footer-cart {
			position: fixed;
			left: 20rpx;
			right: 20rpx;
			bottom: 90rpx;
			background: #464646;
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			border: 8rpx solid #818181;
			padding: 30rpx 45rpx 90rpx;

			.list {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 50rpx 20rpx;

				.item {
					position: relative;
					width: 100rpx;
					height: 100rpx;

					.img {
						width: 100rpx;
						height: 100rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							border: 4rpx solid @color;
						}

						text {
							position: absolute;
							bottom: -16rpx;
							padding: 0 10rpx;
							display: block;
							height: 24rpx;
							line-height: 24rpx;
							background: @color;
							border-radius: 12rpx;
							left: 50%;
							color: #fff;
							font-size: 18rpx;
							transform: translateX(-50%);
						}
					}

					.del {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: -15rpx;
						right: -15rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

		}

		.f-footer {
			position: fixed;
			bottom: 40rpx;
			left: 20rpx;
			right: 20rpx;
			z-index: 999;


			.l {
				width: 180rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				border: 2rpx solid #000000;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: #000;
			}

			.r {
				width: 510rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 50rpx;
				box-sizing: border-box;
				padding: 0 30rpx;

				.rl {
					font-size: 24rpx;
					color: #fff;

					text {
						font-size: 40rpx;
						font-weight: 600;
					}

				}

				.rr {
					.t {
						height: 40rpx;
						line-height: 40rpx;


						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}

					.p {
						line-height: 30rpx;
						font-size: 18rpx;
						color: #FFFFFF;
						text-align: center;

					}
				}
			}
		}
	}
</style>